/*
 * @Description: 配置文件
 * @Author: wangqi
 * @Date: 2022-04-12 18:08:21
 * @LastEditTime: 2022-06-02 11:22:14
 */
import { resolve } from 'path';
import { loadEnv } from 'vite';
// 提供 Vue 3 单文件组件支持
import vue from '@vitejs/plugin-vue';
// 提供 Vue 3 JSX 支持（通过 专用的 Babel 转换插件）。
import vueJsx from '@vitejs/plugin-vue-jsx';
// 为打包后的文件提供传统浏览器兼容性支持
import legacy from '@vitejs/plugin-legacy';
// 组件定义名称插件
import DefineOptions from 'unplugin-vue-define-options/vite';
// Windi CSS [一些列封装的calss名, 也用于响应式布局]
import WindiCSS from 'vite-plugin-windicss';
// 用于生成 svg 雪碧图
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
// 用于ui组件按需加载
// import styleImport from 'vite-plugin-style-import';
// 代码检查插件, 提示信息在cmd这种终端上展示
import checker from 'vite-plugin-checker';

import type { Plugin, UserConfig, ConfigEnv } from 'vite';

function createVitePlugins(viteEnv, isBuild: boolean) {
  console.log(viteEnv, 'viteEnv');
  const vitePlugins: (Plugin | Plugin[])[] = [
    vue(),
    vueJsx({}),
    legacy(),
    DefineOptions(),
    WindiCSS(),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式 [需要和SvgIcon组件中的prefix保持一致, svg-icon]
      symbolId: 'svg-icon-[name]',
    }),
    // styleImport({
    //   libs: [
    //     {
    //       libraryName: 'ant-design-vue',
    //       esModule: true,
    //       resolveStyle: (name) => {
    //         return `ant-design-vue/es/${name}/style/index`;
    //       },
    //     },
    //   ],
    // }),
  ];
  if (!isBuild) {
    const checkerPlugin = checker({
      typescript: true,
      // vueTsc: true,
      eslint: {
        lintCommand: 'eslint "./src/**/*.{.vue,ts,tsx}"', // for example, lint .ts & .tsx
      },
    });
    vitePlugins.push(checkerPlugin);
  }

  return vitePlugins;
}

export default ({ command, mode }: ConfigEnv): UserConfig => {
  // command: 'serve' | 'build'
  // mode: 'development' | 'production'
  // loadEnv 通过mode的模式获取相关的环境变量
  const viteEnv = loadEnv(mode, process.cwd());

  // const { VITE_BASE_URL, VITE_DROP_CONSOLE } = loadEnv(mode, process.cwd());
  const isBuild = command === 'build';

  return {
    // 共享配置
    base: viteEnv.VITE_BASE_URL,
    resolve: {
      alias: [
        {
          find: 'vue-i18n',
          replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
        },
        {
          find: '@',
          replacement: resolve(__dirname, './src'),
        },
      ],
    },
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          modifyVars: {},
          additionalData: `
            @import "ant-design-vue/lib/style/themes/default.less";
            @import "@/styles/variables.less";
          `,
        },
      },
    },
    esbuild: {
      pure: viteEnv.VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : [],
    },
    plugins: createVitePlugins(viteEnv, isBuild),
    // 开发服务器选项
    server: {
      host: '0.0.0.0',
      port: 8088,
    },
    // 依赖优化选项
    optimizeDeps: {
      include: ['lodash-es', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'],
    },
    // 构建选项
    build: {
      target: 'es2015',
      sourcemap: mode === 'development',
      cssTarget: 'chrome79',
      brotliSize: false,
      chunkSizeWarningLimit: 2000,
      // rollupOptions: {
      //   experimentalTopLevelAwait: true,
      // },
    },
  };
};
